import { useEffect, useState } from "react";
import styles from "./ocp.module.scss";
import useScroll from "../../hooks/useScroll";
// import styles2 from './index.module.css'

const Header = () => {
 const {direction} =  useScroll();
 const [showMenu,setMenu] = useState(false)
 const onMouseEnter = ()=>{
  setMenu(true)
 }
 const onMouseLeave = ()=>{
  setMenu(false)

 }
 console.log('direction',direction)
  return (
    <div className="animation">
    <header className={`${styles.header}  ${direction=='up'?'showUp ':direction=='down'?'hideUp':''}`}>
      <div className={`width flex `}>
        <div className={styles.header_logo}>
          <a>
            <img
              className="logo"
              src="https://ocp.xingyungroup.com/images/logo2.png"
            />
          </a>
        </div>
        <ul className={styles.header_nav}>
          <li onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} className="active">
            <a href="#">出海产品技术</a>
          </li>
          <li>
            <a href="#">解决方案</a>
          </li>
          <li>
            <a href="#">案例专栏</a>
          </li>
          <li>
            <a href="#">加入我们</a>
          </li>
          <li>
            <a href="#">关于我们</a>
          </li>
        </ul>
      </div>
    </header>
    <div className={`${styles.top_menu} ${showMenu?'showUp':'hideUp'}`}>
    <img src="http://static.xyb2b.com/images/54ce827523e53824d7929df2abb0c4c4.png"/>
    </div>
    </div>
  );
};
export default Header;
